<template>
   <div >
       <div align="center" style="margin-right: 100px;margin-bottom: 20px">
           <el-input v-model="loginname" prefix-icon="el-icon-search" type="text" size="small" placeholder="默认展示部分用户" style="width: 400px;margin-right: 6px;border: 0px"></el-input>
           <el-button type="primary" size="small" icon="el-icon-search" @click="findUser">搜索</el-button>
       </div>
       <div align="center" >
           <el-row  >
               <el-col style="width: 350px;height: 350px;margin-left: 100px;" align="center" :span="7" v-for="(item, index) in this.userlist" :key="index" :offset="index > 0 ? 2 : 0" >
                   <el-card :body-style="{ padding: '0px' }" style="width: 330px;height: 330px;">
                       <el-button type="text" icon="el-icon-delete" style=" margin-left: 210px; color: red" @click="open(item.loginname,item.id)">删除</el-button>
                       <hr/>
                       <div  class="cardimg" style="width: 80px;height: 80px;border: whitesmoke solid" align="center">
                       </div>
                       <div  align="center">
                           <p>用 户 名: <span class="spanU" style="color: hotpink">{{item.loginname}}</span> </p> <br>
                           <p>电子邮箱: <span style="color: hotpink">{{item.email}}</span></p><br>
                           <p>注册时间: <span style="color: hotpink"> {{item.regtime}}</span></p><br>
                           <p >用户状态:</p>
                           禁用<el-switch
                                   v-model="item.enabled"
                                   active-color="#13ce66"
                                   inactive-color="#ff4949"
                                    @change="cahnge(item.enabled,item.id)">
                               </el-switch>启用
                           <br>
                       <p >用户角色:  <span style="color: hotpink" v-for="(it,j) in item.roles">{{it.nameZh}}</span></p><br>
                       </div>
                   </el-card>
               </el-col>
           </el-row>

       </div>

    </div>

</template>

<script>
    export default {
        name: "User",
        data() {
            return {
                currentDate: 'ccxbcbccb',

                userlist:[

                ],
                // user:{
                //     loginname:'',
                //     email:'',
                //     regtime:'',
                //     status:'',
                //     roles:''
                // },
                loginname:''
            };
        },
        methods:{
            open(data,data2) {
                this.$confirm('此操作将永久删除'+data+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   this.deleteRequest('/user/delUser/'+data2).then((resp)=>{
                       this.seletUser();
                   })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询所有用户
            seletUser(){
                this.getRequest('/user/seletUser').then((resp)=>{
                    if(resp){
                        let userArr=[];
                        resp.forEach((item,i)=>{
                            userArr.push(item);
                        })
                        this.userlist=userArr;

                    }
                })

            },
            //更改状态
            cahnge(data,id){
                let  str = 'enabled='+data+'&'+'id='+id;
               this.putRequest('/user/updeteStatus?'+str).then((resp)=>{
                   if(resp){
                       this.seletUser();
                   }
               })
            },
            findUser(){
                if(this.loginname==null||this.loginname==''){
                    this.seletUser();
                }else {
                    let  str = 'loginname='+this.loginname;
                    this.getRequest('/user/findUser?'+str).then((resp)=>{
                        if(resp){
                            let userArr=[];
                            userArr.push(resp);
                            this.userlist=userArr;
                        }else {
                            this.$message.error("错误,无改用户");
                        }
                    })
                }

            },
        },
        mounted() {
            this.seletUser();
        }
    }
</script>

<style scoped>

.cardimg{
margin-bottom: 30px;
}
    p{
        color: deepskyblue;
        font-size: 14px;
        float: left;
        margin-left: 15px;
        margin-top: 0px;
        margin-bottom: 0px;

    }
    span{
        display: inline;
        margin-left: 24px;
    }
    .spanU{
        margin-left: 30px;
    }
</style>